import React, {Component} from 'react';
import {Form, Input, Select, Space, Button, Tabs, Modal, message} from "antd";
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import TheQueryForm from '@/components/TheQueryForm';
import TheImage from '@/components/TheImage'
import {isJsonString} from '@/utils/isJsonString.js'
import {
    apiPetCheckList,apiPetCheckOrDelete
} from '@/request/petDistinguish/distinguish';
import moment from "moment";

class TabOne extends Component {
    constructor(props) {
        super(props);
        this.state  = {
            columns: [
                {
                    title: "编号",
                    dataIndex: "checkCode",
                    key: "checkCode",
                },
                {
                    title: "用户名称",
                    dataIndex: "nickName",
                    key: "nickName",
                },
                {
                    title: '用户ID',
                    dataIndex: 'memberId',
                    key: 'memberId'
                },
                {
                    title: "鉴别类型",
                    dataIndex: "petType",
                    key: "petType",
                    render: (text, record) => {
                        let str = '-';
                        switch (text) {
                            case 0:
                                str = '狗狗';
                                break;
                            case 1:
                                str = '猫猫';
                                break;
                            case 2:
                                str = '异宠';
                                break;
                            default:
                                break;
                        }
                        return str
                    }
                },
                {
                    title: "图片",
                    dataIndex: "petImages",
                    key: "petImages",
                    render: (text, record) => {
                        if (text) {
                            let data = text.split(',');
                            return <Space>
                                {
                                    data.map((v, i) => {
                                        return <TheImage key={i} src={v} width={80} height={80}/>
                                    })
                                }
                            </Space>
                        }
                    }
                },
                {
                    title: "提交时间",
                    dataIndex: "createTime",
                    key: "createTime",
                },
                {
                    title: "鉴别时间",
                    dataIndex: "updateTime",
                    key: "updateTime",
                    sorter: true,
                },
                {
                    title: "状态",
                    dataIndex: "checkStatus",
                    key: "checkStatus",
                    render: (text,record) => {
                        let str = '-';
                        switch (text) {
                            case 0:
                                str = '待鉴别';
                                break;
                            case 1:
                                str = '鉴别成功-'+(record.lockStatus?'已解锁':'未解锁');
                                break;
                            case 2:
                                str = '鉴别失败(驳回)';
                                break;
                            default:
                                break;
                        }
                        return str
                    }
                },
                {
                    title: "来源",
                    dataIndex: "checkSource",
                    key: "checkSource",
                    render: (text) => {
                        switch (text) {
                            case 0:
                                return "APP"
                            case 1:
                                return "小程序"
                            default:
                                return '-'
                        }
                    }
                },
                {
                    title: "操作",
                    dataIndex: "serviceShowFile",
                    key: "serviceShowFile",
                    fixed: 'right',
                    render: (text, render) => {
                        return <div>
                            <TheButton onClick={() => this.goDetails(render.petCheckId)}>详情</TheButton>
                        </div>
                    }
                },
            ],
            form_show: true,
            searchOption: [
                {
                    field: 'petType',
                    label: '鉴别类型',
                    placeholder: '请选择',
                    required: false,
                    rules: [],
                    type: 'Select',
                    options: [
                        { label: "全部", value: "" },
                        { label: "猫猫", value: 1 },
                        { label: "狗狗", value: 0 },
                    ],
                },
                {
                    field: 'checkCode',
                    label: '鉴别编号',
                    placeholder: '请输入',
                    required: false,
                    type: 'Input',
                },
                {
                    field: 'memberId',
                    label: '用户ID',
                    placeholder: '请输入',
                    required: false,
                    stringMode: true,
                    type: 'InputNumber',
                },
                {
                    field: 'checkSource',
                    label: '来源',
                    placeholder: '请选择',
                    required: false,
                    rules: [],
                    type: 'Select',
                    options: [
                        { label: "全部", value: "" },
                        { label: "APP", value: 0 },
                        { label: "小程序", value: 1 },
                    ],
                },
                {
                    field: 'time',
                    label: '提交时间',
                    placeholder: '请选择',
                    required: false,
                    rules: [],
                    type: 'RangePicker',
                    showTime: true
                },
            ],
            queryForm: {},
            dataSource: [],
            total: 0,
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
            type: props.type
        }
    }
    componentDidMount() {
        let { type,searchOption } = this.state
        if (type){
            searchOption.push({
                field: 'checkStatus',
                label: '鉴别状态',
                placeholder: '请选择',
                required: false,
                rules: [],
                type: 'Select',
                options: [
                    { label: "待鉴别", value: 0 },
                    { label: "鉴别失败", value: 2 },
                    { label: "鉴别成功-未解锁", value: 1 },
                    { label: "鉴别成功-已解锁", value: 3 },
                ],
            })
            this.setState({
                searchOption
            })
        }
        this.getData()
    }
    getData = async () => {
        apiPetCheckList({
            ...this.state.queryForm,
            ...this.state.pageData,
            type: this.state.type
        }).then(res=>{
            if (res.code === 0 && res.data){
                this.setState({
                    dataSource: res.data,
                    pageData: {
                        pageNo: res.pageNo,
                        pageSize: res.pageSize
                    },
                    total: res.totalCount
                })
            }
        })
    }
    goDetails =(id)=>{
        apiPetCheckOrDelete({petCheckId: id}).then(res=>{
            if (res.code === 0){
                if (res.data){
                    this.props.history.push(`/petDistinguish/distinguishManage/details/${id}`);
                }else {
                    message.warning('该报告已经删除，请刷新页面。')
                }
            }
        })
    }
    onReset() {
        this.setState({
            queryForm: {}
        }, () => {
            this.pageChange(1, 10)
        })
    }
    onFormSearch(values) {
        if (values.checkStatus && values.checkStatus === 1){
            values.checkStatus = 1
            values.lockStatus = 0
        }else if (values.checkStatus && values.checkStatus === 3){
            values.checkStatus = 1
            values.lockStatus = 1
        }
        if ("time" in values){
            values.startTime = moment(values.time[0]).format('YYYY-MM-DD HH:mm:ss')
            values.endTime = moment(values.time[1]).format('YYYY-MM-DD HH:mm:ss')
        }
        this.setState({
            pageData: { pageNo: 1, pageSize: 10 },
            queryForm: values
        }, () => {
            this.getData()
        })
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => {
            this.getData()
        })
    };
    // 表格升序降序
    handleTableChange = (pagination, filters, sorter) => {
        let {queryForm} = this.state
        if (sorter.order === undefined){
            queryForm.cend = ''
        }
        else if (sorter.order === 'ascend'){
            queryForm.cend = 1
        }
        else {
            queryForm.cend = 2
        }
        this.setState({queryForm}, () => {
            this.getData()
        })
    }
    render() {
        let {
            form_show,
            searchOption,
            columns,
            dataSource,
            pageData,
            total,
        } = this.state;
        return (
            <div>
                <TheQueryForm
                    ref={(ref) => this.queryFormRef = ref}
                    show={form_show}
                    option={searchOption}
                    onReset={() => this.onReset()}
                    onGetValues={(values) => this.onFormSearch(values)} >
                </TheQueryForm>
                <TheTable
                    scroll={{ x: "max-content", y: '63vh' }}
                    columns={columns}
                    dataSource={dataSource}
                    onChange={this.handleTableChange}
                />
                <ThePagination
                    pageNo={pageData.pageNo}
                    pageSize={pageData.pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
            </div>
        );
    }
}

export default TabOne;
